<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <title>个人简历</title>

    <script src="holder.js/holder.js"></script>
    <link rel="stylesheet" href="./bootstrap.css">
    <script src="./bootstrap.min.js"></script>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <nav class="navbar navbar-expand-xl navbar-light bg-light ps-5 pe-5" style="position: fixed;width: 100%;z-index: 2;">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">个人简历</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNavDropdown">
                <ul class="nav justify-content-center">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#jb">基本信息</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#zwpd">自我评定</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#xxcg">学习成果</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            成果说明
                        </a>
                        <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                            <li><a class="dropdown-item" href="#shuoming1">成果1</a></li>
                            <li><a class="dropdown-item" href="#shuoming2">成果2</a></li>
                            <li><a class="dropdown-item" href="#shuoming3">成果3</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <div id="jb">
        <h1><br><br><br></h1>
    </div>
    <div class="divContent container">
        <div>
            <h2>面试职位</h2>
            <div>
                <div class="alert alert-secondary" role="alert">
                    前端工程师，游戏前端
                </div>
                <h2>薪资</h2>
                <div class="alert alert-secondary" role="alert">
                    面议或者视频电话即可
                </div>
                <h2>工作性质</h2>
                <div class="alert alert-secondary" role="alert">
                    学校实习开始
                </div>
                <br>
                <br>
                <br>
                <div class="row text-center">
                    <h3>个人介绍</h3>
                </div>
                <div>
                    <table class="table table-bordered table-striped table-hover table-condensed">
                        <tr>
                            <td>姓名</td>
                            <td>王某</td>
                            <td>年龄</td>
                            <td>20</td>
                        </tr>
                        <tr>
                            <td>学校</td>
                            <td>浙江邮电</td>
                            <td>学历</td>
                            <td>大专</td>
                        </tr>
                        <tr>
                            <td>专业</td>
                            <td>软件工程</td>
                            <td>学制</td>
                            <td>全日制</td>
                        </tr>
                    </table>
                </div>
            </div>
            <br>
            <div>

                <div>
                    <h2>个人荣誉</h2>
                    <hr>
                    <p>获得省acm蓝桥杯c++划水奖</p>
                    <p>获得市acm划水奖</p>
                    <p>获得web蓝桥杯划水奖</p>
                    <h2 id="zwpd">我的空间</h2>
                    <hr>
                    <div class="btn-group" role="group" aria-label="Basic example">
                        <button type="button" class="btn btn-primary"><a href="https://i.csdn.net/#/user-center/profile?spm=1001.2100.3001.5111" style="color: white;">博客</a></button>
                        <button type="button" class="btn btn-primary"><a href="https://gitee.com/xiao_sha_zhu" style="color: white;">码云</a></button>
                    </div>
                    <br>
                    <br>
                    <h2>个人优势</h2>
                    <hr>
                    <p>1.不断学习前端领域新技术，与团队成员分享经验，互相成长；</p>
                    <p>2.有良好的编程习惯，注重代码效率，能够编写规范、优质与高效的代码</p>
                    <p>3.有较强的逻辑思维能力，善于分析、归纳、解决问题参加过acm竞赛取得一定成绩</p>
                    <p>4.扎实的计算机基础知识，熟悉常用的数据结构、算法和设计模式，并能在日常研发中灵活使用</p>
                    <p>5.善于社交可以很快的融入圈子，可以马上和团队一起完成项目具备较强的责任感、团队合作精神、逻辑思维能力和表达能力</p>
                </div>
            </div>
        </div>
        <br>
        <div>
            <h2 id="skill">职业技能</h2>
            <p>
                <span class="label label-success">JavaScript，HTML，CSS</span>
            </p>
            <div>
                <div class="progress-bar progress-bar-success progress-bar-striped active" style="width: 90%;">
                    <span>90%</span>
                </div>
            </div>
            <p>
                <span class="label label-success">Less或Sass，BootStrap，jQuery</span>

            </p>
            <div>
                <div class="progress-bar progress-bar-success progress-bar-striped active" style="width: 90%;">
                    <span>90%</span>
                </div>
            </div>
            <p>
                <span class="label label-success">vue全家桶</span>
            </p>
            <div>
                <div class="progress-bar progress-bar-success progress-bar-striped active" style="width: 75%;">
                    <span>75%</span>
                </div>
            </div>
            <p>
                <span class="label label-success">微信小程序</span>
            </p>
            <div>
                <div class="progress-bar progress-bar-success progress-bar-striped active" style="width: 70%;">
                    <span>70%</span>
                </div>
            </div>
            <p>
                <span class="label label-success">前端相关知识</span>
            </p>
            <div>
                <div class="progress-bar progress-bar-success progress-bar-striped active" style="width: 5%;">
                    <span>5%</span>
                </div>
            </div>
        </div>
        <br>
        <div>
            <div id="" class="myCarousel carousel slide">
                <h2 id="xxcg">学习成果</h2>

                <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
                    <div class="carousel-indicators">
                        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
                        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
                    </div>
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img src="./1111.jpg" class="d-block w-100" alt="...">
                        </div>
                        <div class="carousel-item">
                            <img src="./222.jpg" class="d-block w-100" alt="...">
                        </div>
                        <div class="carousel-item">
                            <img src="./333.jpg" class="d-block w-100" alt="...">
                        </div>
                    </div>
                    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Previous</span>
                    </button>
                    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Next</span>
                    </button>
                </div>
            </div>
        </div>
        <br>
        <div>
            <div class="myCarousel carousel slide">
                <h2 id="cgsm">成果说明</h2>
                <br>
                <div>
                    <div class="item active">
                        <div id="shuoming1">
                            <h3>成果1</h3>
                        </div>
                        <p>成果说明</p>
                    </div>
                    <div class="">
                        <div id="shuoming2">
                            <h3>成果2</h3>
                        </div>
                        <p>成果说明</p>
                    </div>
                    <div class="">
                        <div id="shuoming3">
                            <h3>成果3</h3>
                        </div>
                        <p>成果说明</p>
                    </div>
                    <a href=".myCarousel" data-slide="prev" class="carousel-control left">
                        <span class="glyphicon glyphicon-chevron-left"></span>
                    </a>
                    <a href=".myCarousel" data-slide="next" class="carousel-control right">
                        <span class="glyphicon glyphicon-chevron-right"></span>
                    </a>
                </div>
            </div>
        </div>
        <br>
        <div>
            <h2>请联系我</h2>
            <div class="panel panel-default">
                <div>如果你是我的伯乐</div>
                <div>
                    <form action="" method="POST">

                        <div class="form-floating mb-3">
                            <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
                            <label for="floatingInput">请输入您的邮箱</label>
                        </div>
                        <br>
                        <select class="form-select" aria-label="Default select example">
                            <option selected>请选择您需要的职位</option>
                            <option value="1">前端工程师</option>
                            <option value="2">游戏前端</option>
                        </select>
                        <br>
                        <div class="form-floating mb-3">
                            <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
                            <label for="floatingInput">请输入您还想要了解的问题</label>
                        </div>
                        <br>
                        <div class="btn-group pull-right"></div>
                        <button type="submit" class="btn btn-success">请联系我</button>
                        <button type="reset" class="btn btn-danger">重置</button>
                        <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">想要马上得到我请点击我</button>

                        <div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
                            <div class="offcanvas-header">
                                <h5 class="offcanvas-title" id="offcanvasBottomLabel">我的联系方式从下面掏出来了~</h5>
                                <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                            </div>
                            <div class="offcanvas-body small">
                                <p> qq：2151186804</p>
                                <p> 电话：1000000000</p>
                                <p> 微信：0000000000</p>
                            </div>
                        </div>
                </div>
                </form>
            </div>
        </div>
</body>

</html>